<template>
  <div class="footer">
    <div class="footer_box">
      <div class="footer_header">
        <p class="title">瑞鼎法拍</p>
        <p class="list footer_font">
          <router-link :to="{ path: '/understand' }" tag="span">了解法拍网</router-link>|
          <router-link :to="{ path: '/service' }" tag="span">瑞鼎服务</router-link>|
          <router-link :to="{ path: '/aboutUs' }" tag="span">关于我们</router-link>|
          <router-link :to="{ path: '/contact' }" tag="span">联系我们</router-link>|
        </p>
      </div>
      <div class="footer_phone">
        <img src="../../assets/img/dh.png" alt />
        <div>
          <p class="footer_font">电话支持：工作日 9:00-18:00</p>
          <p class="phone">010-85181606</p>
        </div>
      </div>
      <div class="footer_sort">
        <div class="sort">
          <p class="onsort">热门区域</p>
          <!-- <p class="unsort">热门商圈</p>
          <p class="unsort">热门房产</p>-->
        </div>
        <div class="sortList">
          <p v-for="(item, index) in list" :key="index" @click="Onsearch(item.name)">{{ item.name }}</p>
        </div>
      </div>

      <div class="footer_address footer_font">
        <p>地址：北京市东城区银河 SOHO B座1606</p>
        <p>
          www.rdfapai.com | 金朝瑞鼎（北京）拍卖有限责任公司 |
          <span @click="Onbei">京ICP备2020040808号</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.OngetListByPid();
  },
  methods: {
    Onbei() {
      window.location.href = "http://beian.miit.gov.cn";
    },
    OngetListByPid() {
      const that = this;
      this.instance
        .getListByPid({
          id: "0"
        })
        .then(res => {
          this.list = res.data.data;
        })
        .catch(function(error) {});
    },
    Onsearch(val) {
      this.$router.push({
        name: "AllRooms",
        params: { title: val }
      });
    }
  }
};
</script>
<style lang="less">
.footer {
  background: #212121;
  .footer_box {
    width: 1200px;
    height: 452px;
    margin: 0 auto;
    padding-top: 60px;
  }
  .footer_font {
    cursor: pointer;
    font-size: 14px;
    color: #adadae;
  }
  .footer_header {
    overflow: hidden;
    height: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #3e3d3d;
    .title {
      float: left;
      font-size: 30px;
      font-weight: bold;
      color: #fff;
    }
    .list {
      cursor: pointer;
      float: right;
      line-height: 50px;
    }
  }
  .footer_phone {
    margin: 30px 0;
    display: flex;
    img {
      margin-right: 20px;
    }
    p {
      line-height: 26px;
    }
    .phone {
      color: #f47f57;
    }
  }
  .footer_sort {
    .sort {
      display: flex;
      p {
        width: 87px;
        height: 34px;
        margin-right: 10px;
        text-align: center;
        line-height: 34px;
      }
    }
    .unsort {
      background: #111111;
      font-size: 14px;
      color: #adadae;
    }
    .onsort {
      background: #374143;
      font-size: 14px;
      color: #fff;
    }
    .sortList {
      overflow: hidden;
      padding: 17px 0 23px 0;
      font-size: 12px;
      color: #adadae;
      line-height: 40px;
      border-bottom: 1px solid #3e3d3d;
      p {
        float: left;
        cursor: pointer;
        margin-bottom: 20px;
        width: 8.3%;
      }
    }
  }
  .footer_address {
    margin-top: 23px;
    text-align: center;
    line-height: 35px;
  }
}
</style>
